<template>
  <div class="singer-category">
    <div v-for="(item, key) in categoryList" :key="key">
      <ul>
        <li
          v-for="(value, index) of item"
          :key="value.id"
          :class="{'active': activeIndex[key] === index }"
          @click="categoryClick(key, index)"
        >
          {{ value.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    categoryList: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      activeIndex: {
        sex: 0,
        area: 0,
        genre: 0
      }
    }
  },
  methods: {
    // 为激活的当前 li 添加active类
    // 当activeIndex中的数据值与它相对性的index相同时 会为其添加active类
    // 并向父组件发送 category-click 事件 及一个params参数
    categoryClick (key, index) {
      // console.log('key的值为' + key, 'index的值为' + index)
      this.activeIndex[key] = index
      const params = {}
      for (let key in this.activeIndex) {
        params[key] = this.categoryList[key][this.activeIndex[key]].id
      }
      this.$emit('category-click', params)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../common/stylus/variable.styl'
.singer-category {
  padding: 10px 10px 0 10px;
  color: $color-text-d;
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      margin 5px;
      padding: 5px;
      text-align: center;
      font-size: $font-size-medium;
    }
    .active {
      border-radius: 10px;
      background-color: $color-text-l;
      color: $color-text-ll;
    }
  }
}
</style>
